<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import Comment from '../reply/Comment.vue'
import request from '../../api/index.js'
const proxy = getCurrentInstance()?.proxy
const router = useRouter()
const noRead = ref(0)
const urlComment = ref({
  get: '/admin/comment//searchComment',
  change: '/admin/comment/updateCommentReadStatus'
 
})
const comment = ref(null)
const urlMessage = ref({
  get: '/admin/message/searchMessage',
  change: '/admin/message/updateMessageReadStatus'
})
const back = () => {  // 返回首页
  router.push('/')
}

const getNoRead = () => {
  request.post(urlMessage.value.get, {
    pageSize: 10000
  }).then(res => {
    if (res.data.status ==='success') {
      noRead.value = res.data.data.filter(item => item.is_read === 0).length
    } else {
      noRead.value = 0
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}
const refresh =  () => {
   getNoRead()
}

const enter = () => {
  if (comment.value) {
    comment.value.refreshPagination()
  }
}
onMounted(() => {
  getNoRead()
})


</script>

<template>
  <div class="head-bar">
    <yk-space align="center" :size="12" style="cursor:pointer" @click="back">
      <img src="../../assets/vue.svg" alt="" class="logo">
      <span class="name">XXXXXX</span>
    </yk-space>
    <yk-space align="center" :size="24">
      <yk-space style="padding-bottom:10px;">
        <yk-popover placement="bottomRight" @mouseenter="enter">
          <template #popover>
           <Comment ref="comment" title="message" :url="urlMessage" @refreshData="refresh()" :noRead="noRead" />
          </template>
          <yk-badge :is-dot="noRead > 0">
            <IconMailOutline style="font-size:25px"/>
          </yk-badge>
        </yk-popover>
      </yk-space>
      <yk-avatar
        img-url="https://www.huohuo90.com:3003/user/6353b034dd4b583975e77fbe.png"
      ></yk-avatar>
      <div><yk-theme /></div>
      <yk-button>退出</yk-button>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
  .head-bar {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: @bg-color-l;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 24px;

    :deep(.yk-tooltip__content) {
      max-width: 500px;
    }
    .name {
      font-weight: 600;
      font-size: 20px;
    }

    .logo {
      width: 38px;
      height: 24px;
    }
    :deep(.yk-badge) {
      .yk-badge__sup {
        .yk-badge__count.isRound {
          width:15px;
          height:15px;
        }
        .yk-badge__count {
          line-height: 15px;
        }
      }
    }
  }
</style>